<template>
	<view class="container">
		<view class="content">
			<view class="content-top d-rn d-ac">
				<view class="content-top-left">
					<image :src="baseUrl + user.avatar" mode=""></image>
				</view>
				<view class="content-top-right">
					<view class="content-top-right-top d-rn d-ac">
						<text>{{ user.employeeName }}{{ $t('user_employeeName_attendance') }}</text>
						<text>{{ user.positionName }}</text>
					</view>
					<view class="content-top-right-bto">
						<text
							class="one-txt-cut"
							style="max-width: 500rpx; display: block"
							>{{ user.employerNames }}</text
						>
					</view>
				</view>
			</view>
			<view class="clockIn">
				<!-- 排班制打卡 -->
				<view class="clockIn-order">
					<view
						class="clockIn-order-daka d-rn d-jb"
						v-if="paiInfo && paiInfo.signInTime"
					>
						<view class="clockIn-order-daka-left">
							<view class="clockIn-order-daka-left-top d-rn d-ac">
								<text
									>{{$t('clockIn_order_signIn')}}：{{
										paiInfo && paiInfo.signInTime
											? paiInfo.signInTime
											: '--'
									}}</text
								>
								<text
									v-if="
										paiInfo.kaoqinList &&
										paiInfo.kaoqinList.find(
											(v) => v.punchForm == 1
										) && 
										paiInfo.kaoqinList.find(
											(v) => v.punchForm == 1
										).isOutWork == 1 &&
										paiInfo.signOutTime
									"
									class="isOutWork"
									>{{ $t('user_employeeName_fieldClockIn') }}</text
								>
								<text
									@click="handleDaKa(paiInfo, 1)"
									l
									v-if="
										paiInfo.signInTime &&
										submitAmendmentRequest == 1
									"
									>{{ $t('apply_for_modify') }}</text
								>
								<!-- <text @click="handleJiaBan(paiInfo)" v-if="paiInfo.signOutTime"
                  >加班申请</text
                > -->
							</view>
							<view
								class="clockIn-order-daka-left-min"
								v-if="attendanceType != 3"
							>
								<text>{{$t('clockIn_order_shiftName')}}：{{ paiInfo.shiftName }}</text>
							</view>
							<view class="clockIn-order-daka-left-bto d-rn">
								<image
									src="../../static/img/address.png"
									mode="widthFix"
								></image>
								<text style="width: 100%">{{
									paiInfo.signInAddress
								}}</text>
							</view>
							<view
								class="clockIn-order-daka-left-mark d-rn d-ac"
							>
								<text>{{$t('clockIn_order_note')}}：{{ paiInfo.signInRemark }}</text>
							</view>
						</view>
						<view class="clockIn-order-daka-image">
							<image
								v-if="paiInfo.signInPic"
								:src="paiInfo.signInPic"
								mode=""
							></image>
						</view>
					</view>
					<view
						class="clockIn-order-daka d-rn d-jb"
						v-if="paiInfo && paiInfo.signOutTime"
					>
						<view class="clockIn-order-daka-left">
							<view class="clockIn-order-daka-left-top d-rn d-ac">
								<text
									>{{$t('clockIn_order_signOut')}}：{{
										paiInfo && paiInfo.signOutTime
											? paiInfo.signOutTime
											: '--'
									}}</text
								>
								<text
									v-if="
										paiInfo.kaoqinList &&
										paiInfo.kaoqinList.find(
											(v) => v.punchForm == 2
										)&&
										paiInfo.kaoqinList.find(
											(v) => v.punchForm == 2
										).isOutWork == 1 &&
										paiInfo.signOutTime
									"
									class="isOutWork"
									>{{ $t('user_employeeName_fieldClockIn') }}</text
								>
								<text 
									@click="handleDaKa(paiInfo, 2)"
									v-if="
										paiInfo.signInTime &&
										submitAmendmentRequest == 1
									"
									>{{ $t('apply_for_modify') }}</text
								>
								<text style="color:#196bff;font-size: 12px;"
									@click="handleJiaBan(paiInfo)"
									v-if="
										paiInfo.signOutTime && overTimeRule != 3
									"
									>{{ $t('clockIn_apply_overtime') }}</text
								>
							</view>
							<view
								class="clockIn-order-daka-left-min"
								v-if="attendanceType != 3"
							>
								<text>{{$t('clockIn_order_shiftName')}}：{{ paiInfo.shiftName }}</text>
							</view>
							<view class="clockIn-order-daka-left-bto d-rn">
								<image
									src="../../static/img/address.png"
									mode="widthFix"
								></image>
								<text style="width: 100%">{{
									paiInfo.signOutAddress
								}}</text>
							</view>
							<view
								class="clockIn-order-daka-left-mark d-rn d-ac"
							>
								<text>{{$t('fieldClockIn_remark')}}：{{ paiInfo.signOutRemark }}</text>
							</view>
						</view>
						<view class="clockIn-order-daka-image">
							<image
								v-if="paiInfo.signOutPic"
								:src="paiInfo.signOutPic"
								mode=""
							></image>
						</view>
					</view>
					<view class="clockIn-order-top" v-if="attendanceType == 2">
						<view class="form-one d-rn d-ac d-jb">
							<text class="text">{{ $t('clockIn_order_shiftName') }}</text>
							<picker
								@change="bindPickerChange"
								:range="numList"
								range-key="shiftName"
								class="picker"
							>
								<view class="d-rn d-ac d-jc">
									<view class="picker-con d-rn d-ac">
										<view
											class="uni-input one-txt-cut"
											v-if="type.typeName"
											>{{ type.typeName }}
										</view>
										<view
											class="uni-input one-txt-cut"
											v-else
											>{{ $t('clockIn_order_selectShift') }}</view
										>
										<image
											src="../../static/img/bottom.png"
											mode=""
										></image>
									</view>
								</view>
							</picker>
						</view>
					</view>
					<view
						class="clockIn-order-bto"
						v-if="selectDetail.id && attendanceType != 3"
					>
						<view class="clockIn-order-bto-title d-rn d-ac d-jb">
							<text>{{ $t('clockIn_order_details') }}</text>
							<view style="color: #999999; font-size: 28rpx">
								{{ selectDetail.publisher }} {{ $t('clockIn_order_publisher') }}
								{{ selectDetail.createTime }}
							</view>
						</view>
						<view class="clockIn-order-bto-one d-rn d-ac d-jb">
							<text>{{ $t('clockIn_order_workTime') }}</text>
							<view
								class="d-rn d-ac"
								style="box-sizing: border-box; color: #999999"
							>
								<view style="color: #999999">
									{{
										`${selectDetail.workTimeStart}--${selectDetail.workTimeEnd}`
									}}
								</view>
							</view>
						</view>
						<view class="clockIn-order-bto-one d-rn d-ac d-jb">
							<text style="white-space: nowrap">{{ $t('clockIn_order_workPlace') }}</text>
							<view>
								<picker
									@change="bindPosition"
									:range="position"
									range-key="address"
									class="picker"
								>
									<view>
										<view
											style="
												display: flex;
												justify-content: flex-end;
												align-items: center;
											"
										>
											<view
												class="uni-input addressed"
												v-if="posiName"
												>{{ posiName }}
											</view>
											<view
												class="uni-input addressed"
												v-else
												>{{ $t('fieldClockIn_select_location') }}</view
											>
											<image
												src="../../static/img/right.png"
												mode=""
												style="
													width: 40rpx;
													height: 40rpx;
												"
											></image>
										</view>
									</view>
								</picker>
							</view>
						</view>
						<view class="clockIn-order-bto-one d-rn d-ac d-jb">
							<text>{{ $t('clockIn_order_note') }}</text>
							<text>{{ selectDetail.remark }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 自由 -->
			<view class="clockIn" v-if="attendanceType == 3">
				<view class="clockIn-free">
					<view class="clockIn-free-top d-rn d-ac d-jb">
						<text>{{ $t('clockIn_order_note') }}</text>
						<text>{{ $t('clockIn_free_remark') }}</text>
					</view>
					<view class="clockIn-free-bto">
						<textarea
							name=""
							id=""
							cols="30"
							rows="10"
							v-model="remark"
							:placeholder="$t('clockIn_free_placeholder')"
							placeholder-style="color:#BABABA;"
						></textarea>
					</view>
				</view>
			</view>

			<view
				class="content-min d-rn d-ac d-jc"
				@click="handleGu(attendanceType)"
				:style="{
					marginTop:
						(attendanceType == 1
							? top
							: attendanceType == 2
							? paiban
							: ziyou) + 'px',
				}"
				v-if="!shang && !noclockin"
			>
				<view
					class="content-min-one shang d-rn d-ac d-jc"
					:style="{
						backgroundColor: !fieldClockIn
							? 'rgba(255,208,61,0.6)'
							: 'rgba(41,219,161,0.6)',
					}"
				>
					<view
						class="content-min-one-one shang1 d-cn d-ac d-jc"
						:style="{
							backgroundColor: fieldClockIn
								? '#29dba1'
								: '#ffd03d',
						}"
					>
						<text
							v-if="
								paiInfo &&
								!paiInfo.signInTime &&
								!noclockin &&
								!paiInfo.passClockInDeadline
							"
						>
							<text v-if="fieldClockIn && posiName"
								>{{ $t('fieldClockIn_title') }}</text
							>
							<text v-else>{{ $t('clockIn_order_signIn_title') }}</text>
						</text>
						<text
							v-if="
								(paiInfo && paiInfo.signInTime && !noclockin) ||
								(!paiInfo.signInTime &&
									paiInfo.passClockInDeadline)
							"
						>
							<text v-if="fieldClockIn && posiName"
								>{{ $t('fieldClockIn_title') }}</text
							>
							<text v-else>{{ $t('clockIn_order_signOut_title') }}</text>
						</text>
						<text>{{ form.punchTime }}</text>
					</view>
				</view>
			</view>
			<view
				class="content-min d-rn d-ac d-jc"
				:style="{
					marginTop:
						(attendanceType == 1
							? top
							: attendanceType == 2
							? paiban
							: ziyou) + 'px',
				}"
				v-if="!shang && noclockin"
			>
				<view class="content-min-one shang d-rn d-ac d-jc">
					<view
						class="content-min-one-one shang1 d-cn d-ac d-jc"
						style="background-color: #999999"
					>
						<text
							v-if="
								paiInfo && !paiInfo.signInTime && !fieldClockIn
							"
							>{{ $t('clockIn_order_signIn_title') }}</text
						>
						<text
							v-else-if="
								paiInfo && !paiInfo.signInTime && fieldClockIn
							"
							>{{ $t('fieldClockIn_title') }}</text
						>
						<text v-else>{{ $t('clockIn_order_signOut_title') }}</text>
						<text>{{ form.punchTime }}</text>
					</view>
				</view>
			</view>
			<view
				class="content-min d-rn d-ac d-jc"
				@click="handleGu(attendanceType)"
				:style="{ marginTop: top + 'px' }"
				v-if="shang"
			>
				<view class="content-min-one xia d-rn d-ac d-jc">
					<view class="content-min-one-one xia1 d-cn d-ac d-jc">
						<text>{{ $t('clockIn_order_signIn_title') }}</text>
						<text>{{ form.punchTime }}</text>
					</view>
				</view>
			</view>
			<view
				class="content-min-position d-cw d-ac d-jc"
				:style="{
					marginTop:
						(attendanceType == 1
							? puweizhi
							: attendanceType == 2
							? paibanweizhi
							: ziyouweizhi) + 'rpx',
				}"
			>
				<view class="content-min-position-top d-rn d-ac d-jc">
					<image src="../../static/img/dun.png" mode=""></image>
					<text>{{ posiName }}</text>
				</view>
				<view class="content-min-position-bto" @click="handleSeeJiLu">
					<text>{{ $t('clockIn_check_records') }}</text>
				</view>
				<view
					class="content-min-position-bto"
					@click="
						handleJiaBan({
							overTimeRule: overTimeRule,
							isDay: true,
							...paiInfo,
							punchDate: getDay,
						})
					"
					v-if="overTimeRule != 3"
				>
					<text>{{ $t('overtime_application') }}</text>
				</view>
			</view>
		</view>
		<u-loading-page
			:loading="loading"
			loading-mode="spinner"
			bg-color="rgba(0,0,0,0.5)"
			color="#fff"
			loading-text="loading..."
		></u-loading-page>
		<view
			id="map"
			style="
				width: 300px;
				height: 200px;
				opacity: 0;
				position: absolute;
				top: -2000px;
			"
		></view>
		<u-modal
			:show="show"
			:title="needFieldClockInRemark? $t('clockIn_order_remark') :$t('fieldClockIn_title')"
			showCancelButton
			@confirm="fieldClockInConfirm"
			@cancel="
				show = false;
				loading = false;
			"
		>
			<view class="slot-content">
				<view style="margin: 4px 0">{{ $t('fieldClockIn_remark') }}</view>
				<u--input
					:placeholder="$t('fieldClockIn_placeholder')"
					border="surround"
					v-model="fieldClockInRemark"
				></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
import {
	judgeLocation,
	getPunchInType,
	punchIn,
	classesList,
	attendanceRecordByDay,
} from '../../api/index.js';

function isTimeBeforeOrEqual(inputTime) {
	if (!inputTime) return true;
	const currentTime = new Date();
	const targetTime = new Date();

	// 设置目标时间为今天的指定时间
	targetTime.setHours(parseInt(inputTime.substring(0, 2), 10));
	targetTime.setMinutes(parseInt(inputTime.substring(3, 5), 10));
	targetTime.setSeconds(0, 0); // 设置秒和毫秒为0

	// 如果当前时间小于等于目标时间，返回true；否则返回false
	return currentTime <= targetTime;
}

import request from '@/request/config.js';
import moment from 'moment';
export default {
	data() {
		return {
			show: false,
			needFieldClockInRemark: '',
			noclockin: false,
			phoneInfo: uni.getSystemInfoSync(),
			top: 0,
			// 迟到-早退状态
			shang: false,
			loading: false,
			type: {
				typeName: '',
				typeId: '',
			},
			paiban: 24,
			ziyou: 36,
			remark: null,
			// 位置
			puweizhi: 100,
			paibanweizhi: 30,
			ziyouweizhi: 30,
			// 是否允许提交修改申请
			submitAmendmentRequest: 0,
			// 1.固定班次,2.排班制,3.自由工时
			attendanceType: 2,
			// 排班制顶部信息
			paiInfo: {},
			// 上班时间
			banTime: '',
			numList: [],
			form: {
				classesId: '',
				type: '',
				latitude: '',
				longitude: '',
				place: '',
				punchTime: '',
			},
			selectDetail: {},
			position: [],
			date: new Date().toISOString(), //现在时间
			baseUrl: request.baseUrl,
			posiName: '',
			user: uni.getStorageSync('userInfo'),
			longitude: '',
			latitude: '',
			fieldClockIn: null,
			positionIndex: 0,
			classesIndex: 0,
			overTimeRule: '',
			fieldClockInRemark:false,
		};
	},
	computed: {
		getDay() {
			const now = new Date();
			const year = now.getFullYear();
			const month = (now.getMonth() + 1).toString().padStart(2, '0');
			const day = now.getDate().toString().padStart(2, '0');
			const today = `${year}-${month}-${day}`;
			return today;
		},
	},
	onLoad() {
		
		this.top = this.phoneInfo.windowHeight / 4;
		setInterval(() => {
			this.form.punchTime = Date.parse(new Date());
			this.form.punchTime = this.$commonFun.timestampToTimeHour(
				this.form.punchTime
			);
		}, 1000);
		this.getLocation();
	},
	onShow() {
		

		// this.longitude = 115.55676;
		// this.latitude = 38.87947;
	},

	methods: {
		// 获取当前经纬度
		getLocation() {
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				// highAccuracyExpireTime:true,
				complete: (aes) => {
					console.log('经纬度', aes);
					this.longitude = aes.longitude;
					this.latitude = aes.latitude;
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo',
						data: {
							key: 'd1f91d97fef8d435f1141e28a93e0ff0',
							location: `${aes.longitude},${aes.latitude}`,
							extensions: 'all',
						},
						success: (res) => {
							console.log('位置信息：', res.data);
							// 在这里处理返回的位置信息
						},
						fail: (err) => {
							console.error('请求失败：', err);
						},
					});

					// 没有经纬度不执行
					if (!aes.longitude || !aes.latitude) return;
					this.getgetAttendanceType();
				},
			});
		},
		async getJudgeLocation() {
			console.log(
				this.numList[this.classesIndex],
				'this.numListclassesIndex'
			);
			let params = {
				originLat: this.latitude,
				originLng: this.longitude,
				...this.numList[this.classesIndex].clockingPlace[
					this.positionIndex
				],
				destLat:
					this.numList[this.classesIndex].clockingPlace[
						this.positionIndex
					].latitude,
				destLng:
					this.numList[this.classesIndex].clockingPlace[
						this.positionIndex
					].longitude,
				outwork: this.numList[this.classesIndex].outwork,
			};

			console.log('打卡人经纬度', this.longitude, ',', this.latitude);
			console.log(
				'打卡地点经纬度',
				this.numList[this.classesIndex].clockingPlace[
					this.positionIndex
				].longitude,
				',',
				this.numList[this.classesIndex].clockingPlace[
					this.positionIndex
				].latitude
			);
			try {
				const res = await judgeLocation(params);
				console.log('res=============', res);
				if (res.data == 100) {
					this.fieldClockIn = false;
				} else if (res.data == 200) {
					this.fieldClockIn = true;
				} else if (res.data == 300) {
					console.log('不可打卡');
					this.noclockin = true;
				}
			} catch (error) {
				this.fieldClockIn = false;
				this.noclockin = false;
			}
		},
		bindPickerChange(e) {
			// this.getgetAttendanceType();
			console.log('打卡班次', e);
			this.posiName = '';
			this.type.typeName = this.numList[e.detail.value].shiftName;
			this.form.classesId = this.numList[e.detail.value].id;
			this.selectDetail = this.numList[e.detail.value];
			this.classesIndex = e.detail.value;
			this.selectDetail.id = this.numList[e.detail.value].id;
			this.getgetTodayAttendanceRecord();
			this.position = this.selectDetail.clockingPlace;
			// 处理当前时间是否超过上班打卡截止时间

			// 切换打卡班次，重新获取打卡信息
			// this.getLocation()
			// if (this.position && this.position.length == 1) {

			// 	this.posiName = this.position[0].address;
			// 	if (this.fieldClockIn) {
			// 		this.noclockin = false;
			// 		this.$forceUpdate();
			// 		return;
			// 	}
			// 	console.log(Number(this.position[0].latitude),
			// 		Number(this.position[0].longitude),
			// 		Number(this.latitude),
			// 		Number(this.longitude))
			// 	var c = this.getDistance(
			// 		Number(this.position[0].latitude),
			// 		Number(this.position[0].longitude),
			// 		Number(this.latitude),
			// 		Number(this.longitude)
			// 	);
			// 	if (c > this.position[0].distance) {
			// 		this.noclockin = true;
			// 	} else {
			// 		this.noclockin = false;
			// 	}
			// }
			this.$forceUpdate();
		},
		bindPosition(e) {
			console.log('选择打卡地点', e);
			this.positionIndex = e.detail.value;
			console.log('打卡地点名称', this.position[e.detail.value].address);
			this.posiName = '';
			this.$set(this, 'posiName', this.position[e.detail.value].address);
			// 是否外勤可打卡
			this.getJudgeLocation();

			// if (this.fieldClockIn) {
			//   this.noclockin = false;
			//   return;
			// }
			// var c = this.getDistance(
			// 	Number(this.position[e.detail.value].latitude),
			// 	Number(this.position[e.detail.value].longitude),
			// 	Number(this.latitude),
			// 	Number(this.longitude)
			// );
			// if (c > this.position[e.detail.value].distance) {
			// 	console.log(1)
			// 	this.noclockin = true;
			// } else {
			// 	console.log(2)
			// 	this.noclockin = false;
			// }
			this.noclockin = false;
			this.$forceUpdate();
		},
		getgetTodayAttendanceRecord() {
			// 不置空打卡地点
			// this.posiName = "";
			attendanceRecordByDay({
				shiftId: this.selectDetail.id,
				punchDate: this.getDay,
			}).then((res) => {
				console.log('🐛 ~ getgetTodayAttendanceRecord ~ res:', res);
				if (res.data[0]) {
					if (
						!res.data[0].attendanceRecordShiftDTOList[
							this.classesIndex
						]
					) {
						return uni.showToast({
							title: this.$t('clockIn_order_no_schedule'),
							icon: 'none',
						});
					}
					this.paiInfo =res.data[0].attendanceRecordShiftDTOList[this.classesIndex];
					console.log('this.paiInfo',this.paiInfo)
					this.form.punchTime = this.paiInfo.signInTime;
					this.paiInfo.kaoqinList =
						res.data[0].attendanceRecordShiftDTOList[
							this.classesIndex
						].detailList;
					this.paiInfo.passClockInDeadline = !isTimeBeforeOrEqual(
						this.numList[this.classesIndex].clockInDeadline
					);
					console.log(
						'是否已经过上班打卡时间',
						this.paiInfo.passClockInDeadline
					);
					// this.noclockin = false;
					// 处理是否超过打卡时间
					this.noclockin = !isTimeBeforeOrEqual(
						this.numList[this.classesIndex].clockInStartTime
					);

					// this.numList.forEach((item) => {
					// 	if (item.id == this.paiInfo.shiftId) {
					// 		this.type.typeName = item.shiftName;
					// 		this.selectDetail = item;
					// 		this.selectDetail.clockingPlace = this.selectDetail.clockingPlace;
					// 		this.position = this.selectDetail.clockingPlace;
					// 		if (
					// 			this.selectDetail.clockingPlace &&
					// 			this.selectDetail.clockingPlace.length == 1
					// 		) {
					// 			this.posiName = this.selectDetail.clockingPlace[0].address;
					// 			var c = this.getDistance(
					// 				Number(this.selectDetail.clockingPlace[0].latitude),
					// 				Number(this.selectDetail.clockingPlace[0].longitude),
					// 				Number(this.latitude),
					// 				Number(this.longitude)
					// 			);
					// 			if (c > this.selectDetail.clockingPlace[0].distance) {
					// 				this.noclockin = true;
					// 				console.log('不可打卡461')
					// 			} else {
					// 				this.noclockin = false;
					// 			}
					// 		}
					// 		this.$forceUpdate();
					// 	}
					// });
				} else {
					this.paiInfo = {};
				}
			});
		},
		getclassesList() {
			classesList().then((res) => {
				console.log('🐛 ~ classesList ~ res:', res);
				if (res.code == 200) {
					this.numList = res.data;
				}
			});
		},
		getgetAttendanceType() {
			getPunchInType().then((res) => {
				console.log('res', res);
				if (res.code == 200) {
					this.overTimeRule = res.data.overTimeRule;
					this.attendanceType = res.data.type;
					this.numList = res.data.shiftDTOList;
					this.fieldClockIn = res.data.fieldClockIn;
					this.needFieldClockInRemark = res.data.fieldClockInRemark;
					// 运行修改打卡
					this.submitAmendmentRequest =
						res.data.submitAmendmentRequest;
					// 允许补卡
					let curHours = new Date().getHours();
					let curMinutes = new Date().getMinutes();
					let optimal = 0;
					let optimalData = {};
					console.log('this.numList', this.numList);
					this.numList.map((item, index) => {
						console.log('item.workTimeStart', item.workTimeStart);
						let itemTime = item.workTimeStart.split(':');
						let hours = Math.abs((itemTime[0] - curHours) * 60);
						let minutes = Math.abs(itemTime[1] - curMinutes);
						let totalTime = hours + minutes;
						if (index === 0) {
							optimal = totalTime;
							optimalData = item;
							this.classesIndex = index;
						} else if (totalTime < optimal) {
							optimal = totalTime;
							optimalData = item;
							this.classesIndex = index;
						}
					});

					console.log('this.classesIndex', this.classesIndex);
					if (this.attendanceType == 1 || this.attendanceType == 2) {
						this.form.classesId = optimalData.id;
						// this.classesIndex = this.numList.findIndex(v=>v.id==optimalData.id)
						this.position = optimalData.clockingPlace;
						this.selectDetail = optimalData;
						this.posiName = this.position[0].address;
						this.bindPickerChange({
							detail: {
								value: 0,
							},
						});
					}
					if (this.attendanceType == 2) {
						this.type.typeName = optimalData.shiftName;
					}

					if (this.attendanceType == 3) {
						this.getgetTodayAttendanceRecord();
					}

					// var c = this.getDistance(
					//   Number(this.selectDetail.clockingPlace[0].latitude),
					//   Number(this.selectDetail.clockingPlace[0].longitude),
					//   Number(this.latitude),
					//   Number(this.longitude)
					// );
					// if (c > this.selectDetail.clockingPlace[0].distance) {
					//   this.noclockin = true;
					// } else {
					//   this.noclockin = false;
					// }
				}
			});
		},
		handleGu() {
			// 获取定位信息;
			// uni.getLocation({
			//   type: "wgs84",
			//   isHighAccuracy: true,
			//   success: function (lb) {
			//     this.latitude = lb.latitude;
			//     this.longitude = lb.longitude;

			// let key = '796a3af9b7154728a6cd8b275761de6d'; //高德地图key
			// uni.request({
			// 	url: 'https://restapi.amap.com/v3/geocode/regeo?output=json&location=' +lb.longitude + ',' + lb.latitude + '&key=' + key +'&radius=1000&extensions=all',
			// 	data: {},
			// 	header: {
			// 		'Content-Type': 'application/json',
			// 		'Access-Control-Allow-Origin': '*'
			// 	},
			// 	success: function(res) {
			// 		this.area = res.data.regeocode.addressComponent.city;
			// 	},
			// })
			//   },
			// });
			console.log('attendanceType', this.attendanceType);
			// 打卡形式
			if (this.attendanceType == 3) {
				let params = {
					punchTime: this.dateFormat(new Date()).slice(0, 5),
					punchType: this.attendanceType,
					latitude: this.latitude,
					longitude: this.longitude,
					punchForm:
						this.paiInfo.signInTime ||
						this.paiInfo.passClockInDeadline
							? 2
							: 1,
					signInRemark: this.paiInfo.signInTime ? '' : this.remark,
					signOutRemark: this.paiInfo.signInTime ? this.remark : '',
					isOutWork: this.fieldClockIn ? 1 : 0,
				};
				console.log(642);
				this.punchIn(params);
				return;
			}
			if (!this.posiName) {
				this.$commonFun.showTips(this.$t('fieldClockIn_select_location'));
				return false;
			}
			// 排班打卡
			if (this.form.classesId) {
				let params = {
					address: this.posiName,
					latitude: this.latitude,
					longitude: this.longitude,
					punchForm:
						this.paiInfo.signInTime ||
						this.paiInfo.passClockInDeadline
							? 2
							: 1,
					punchTime: this.dateFormat(new Date()).slice(0, 5),
					shiftId: this.form.classesId,
					punchType: this.attendanceType,
					isOutWork: this.fieldClockIn ? 1 : 0,
				};
				if (this.selectDetail.punchingMode == 0) {
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						success: (file) => {
							uni.uploadFile({
								url: this.baseUrl + '/common/upload',
								filePath: file.tempFilePaths[0],
								name: 'file',
								header: {
									Authorization:
										'Bearer ' + uni.getStorageSync('token'),
								},
								success: (res) => {
									let data = JSON.parse(res.data);
									console.log('上传图片',data)
									params.pic = data.url.replace('http://','https://');
									console.log(677);
									// 解决外勤打卡没图片
									this.form.pic =  data.url.replace('http://','https://');
									this.punchIn(params);
								},
							});
						},
					});
				} else {
					// 排班打卡
					let params = {
						address: this.posiName,
						latitude: this.latitude,
						longitude: this.longitude,
						punchForm:
							this.paiInfo.signInTime ||
							this.paiInfo.passClockInDeadline
								? 2
								: 1,
						punchTime: this.dateFormat(new Date()).slice(0, 5),
						shiftId: this.form.classesId,
						punchType: this.attendanceType,
						isOutWork: this.fieldClockIn ? 1 : 0,
					};
					console.log(693, params);
					this.punchIn(params);
				}
			} else {
				this.$commonFun.showTips(this.$t('clockIn_order_selectShift'));
				return false;
			}
		},

		punchIn(params) {
			this.loading = true;
			// 外勤打卡的话需要弹窗确认
			if (this.fieldClockIn ) {
				this.show = true;
				return;
			}
			// 需要备注
			if(this.needFieldClockInRemark){
				this.show = true;
				return;
			}
			punchIn(params)
				.then((res) => {
					if (res.code == 200) {
						this.$commonFun.showTips(this.$t('clockIn_success'));
						this.getgetTodayAttendanceRecord();
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		fieldClockInConfirm() {
			let params = {
				address: this.posiName,
				latitude: this.latitude,
				longitude: this.longitude,
				punchForm:
					this.paiInfo.signInTime || this.paiInfo.passClockInDeadline
						? 2
						: 1,
				punchTime: this.dateFormat(new Date()).slice(0, 5),
				shiftId: this.form.classesId,
				punchType: this.attendanceType,
				isOutWork: this.fieldClockIn ? 1 : 0,
				remark: this.fieldClockInRemark,
				pic:this.form.pic,
			};
			punchIn(params)
				.then((res) => {
					if (res.code == 200) {
						this.$commonFun.showTips(this.$t('clockIn_success'));
						this.getgetTodayAttendanceRecord();
					}
				})
				.finally(() => {
					this.loading = false;
					this.show = false;
				});
		},
		handleDaKa(paiInfo, punchType) {
			paiInfo.punchType = punchType;
			this.$commonFun.goUrl(1, '../updateDaka/index', paiInfo);
		},
		handleJiaBan(paiInfo) {
			this.$commonFun.goUrl(1, '../overtime/index', paiInfo);
		},
		handleSeeJiLu() {
			this.$commonFun.goUrl(1, '../attendance/index', {
				overTimeRule: this.overTimeRule,
			});
		},
		dateFormat(time) {
			let date = new Date(time);
			let year = date.getFullYear();
			// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			let month =
				date.getMonth() + 1 < 10
					? '0' + (date.getMonth() + 1)
					: date.getMonth() + 1;
			let day =
				date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			let hours =
				date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			let minutes =
				date.getMinutes() < 10
					? '0' + date.getMinutes()
					: date.getMinutes();
			let seconds =
				date.getSeconds() < 10
					? '0' + date.getSeconds()
					: date.getSeconds();
			// 拼接
			return hours + ':' + minutes + ':' + seconds;
			// return year + "-" + month + "-" + day;
		},
		getDistance(lat1, lng1, lat2, lng2) {
			let EARTH_RADIUS = 6378.137;
			let radLat1 = this.rad(lat1);
			let radLat2 = this.rad(lat2);
			let a = radLat1 - radLat2;
			let b = this.rad(lng1) - this.rad(lng2);
			let s =
				2 *
				Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
								Math.cos(radLat2) *
								Math.pow(Math.sin(b / 2), 2)
					)
				);
			s = s * EARTH_RADIUS;
			//s = Math.round(s * 10000d) / 10000d;
			s = Math.round(s * 10000) / 10000;
			s = s * 1000; //乘以1000是换算成米
			return s;
		},
		rad(d) {
			return (d * Math.PI) / 180.0;
		},
	},
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}

.uni-picker-container ::v-deep.uni-picker-item {
	padding: 0 20rpx !important;
}

.container {
	width: 100%;

	.addressed {
		font-size: 26rpx;
		padding-left: 40rpx;
		color: #999999;
	}

	.content {
		&-top {
			width: 94%;
			margin: 24rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #ffffff;

			&-left {
				margin-right: 24rpx;

				image {
					width: 110rpx;
					height: 110rpx;
				}
			}

			&-right {
				&-top {
					text:nth-of-type(1) {
						font-size: 36rpx;
						font-weight: bold;
						color: #333333;
						margin-right: 20rpx;
					}

					text:nth-of-type(2) {
						padding: 6rpx;
						box-sizing: border-box;
						font-size: 20rpx;
						font-weight: bold;
						color: #ff8f1f;
						background-color: #ffefdf;
						border-radius: 12rpx;
					}
				}

				&-bto {
					margin-top: 14rpx;

					text {
						color: #999999;
					}
				}
			}
		}

		&-min {
			&-one {
				width: 280rpx;
				height: 280rpx;
				border-radius: 50%;

				&-one {
					width: 250rpx;
					height: 250rpx;
					border-radius: 50%;

					text:nth-of-type(1) {
						margin-bottom: 10rpx;
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.shang1 {
					background-color: #ffd03d;
				}

				.xia1 {
					background-color: #ff8b7c;
				}
			}

			.shang {
				background-color: #f7eed0;
			}

			.xia {
				background-color: #f7e0dd;
			}

			&-position {
				&-top {
					margin-bottom: 20rpx;
					padding: 0 40rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}

					text {
						font-size: 28rpx;
						color: #666666;
					}
				}

				&-bto {
					text {
						font-size: 28rpx;
						color: #196bff;
					}
				}
			}
		}

		.clockIn {
			width: 94%;
			margin: 0 auto;

			&-order {
				width: 100%;

				&-daka {
					width: 100%;
					background-color: #ffffff;
					padding: 30rpx 24rpx;
					box-sizing: border-box;
					border-radius: 12rpx;
					margin-bottom: 24rpx;

					&-left {
						&-top {
							text:nth-of-type(1) {
								font-weight: bold;
								color: #333333;
								font-size: 26rpx;
							}

							text:nth-of-type(2) {
								margin-left: 20rpx;
							}

							text:nth-of-type(3) {
								margin: 0 20rpx;
							}

							text:nth-of-type(2),
							text:nth-of-type(3) {
								color: #196bff;
								font-size: 24rpx;
							}
						}

						&-min {
							margin: 20rpx 0;

							text {
								color: #999999;
							}
						}

						&-bto {
							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 20rpx;
							}

							text {
								color: #999999;
							}
						}

						&-mark {
							margin-top: 20rpx;

							text {
								color: #999999;
							}
						}
					}

					&-image {
						image {
							width: 136rpx;
							height: 136rpx;
						}
					}
				}

				&-top {
					padding: 30rpx 24rpx;
					box-sizing: border-box;
					background-color: #ffffff;
					border-radius: 12rpx;

					text {
						font-size: 30rpx;
						color: #333333;
					}

					image {
						transform: rotate(-90deg);
						width: 20rpx;
						height: 18rpx;
						margin-left: 10rpx;
					}

					.uni-input {
						font-size: 28rpx;
						color: #999999;
					}
				}

				&-bto {
					padding: 30rpx 24rpx;
					box-sizing: border-box;
					background-color: #ffffff;
					border-radius: 12rpx;
					margin-top: 24rpx;

					&-title {
						padding-bottom: 16rpx;
						box-sizing: border-box;
						border-bottom: 1px solid #eaeaea;

						text:nth-of-type(1) {
							font-size: 26rpx;
							color: #333333;
							font-weight: bold;
						}

						text:nth-of-type(2) {
							font-size: 26rpx;
							color: #999999;
						}
					}

					&-one {
						margin-top: 20rpx;

						text:nth-of-type(1) {
							font-size: 26rpx;
							color: #333333;
						}

						text:nth-of-type(2) {
							font-size: 26rpx;
							color: #999999;
						}
					}
				}
			}

			&-free {
				width: 94%;
				margin: 50rpx auto 0;

				&-top {
					text:nth-of-type(1) {
						font-size: 32rpx;
						color: #333333;
					}

					text:nth-of-type(2) {
						font-size: 24rpx;
						color: #d5d5d5;
					}
				}

				&-bto {
					margin-top: 16rpx;
					background-color: #ffffff;
					padding: 24rpx 30rpx;
					box-sizing: border-box;
					border-radius: 16rpx;
					font-size: 26rpx;
					color: #bababa;

					textarea {
						width: 100%;
					}
				}
			}
		}
	}
}

.isOutWork {
	border: 1px solid;
	padding: 2px 4px;
	border-radius: 5px;
}
</style>
